<template>
  <div class="wrap">
    <div class="content orderTest-container">
      <div class="iconfont icon-weixin2" @click="wechat"></div>
      <div class="iconfont icon-QQ" @click="qq"></div>
      <div class="iconfont icon-git" @click="git"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "MyFooter",
    components: {},
    data() {
      return {};
    },
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
      wechat() {
        this.$alert(
          '<img style="width:100%" src="https://gitee.com/lihann/pic/raw/master/blogImgs/20210602-175107-0397.jpg" alt="微信">',
          "微信",
          {
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            callback: () => {
              // this.$message
            },
          }
        );
      },
      qq() {
        this.$alert("542356155", "QQ", {
          confirmButtonText: "确定",
          callback: () => {
            // this.$message
          },
        });
      },
      git() {
        this.$alert(
          '<a style="color:#000" target="_blank" href="https://gitee.com/lihann">https://gitee.com/lihann</a>',
          "GIT",
          {
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            callback: () => {
              // this.$message
            },
          }
        );
      },
    },
  };
</script>
<style lang="scss" scoped>
  .wrap {
    // margin: 230px 0 0px;
    margin-top: 230px;
    padding: 40px 0;
    border-top: 1px solid #2c376d;
  }
  .content {
    @include flex;
  }
  .iconfont {
    margin-left: 20px;
    cursor: pointer;
    font-size: 50px;
    color: #fff;
    transition: 0.3s;
  }
  .iconfont:hover {
    color: $hoverColor;
  }
</style>
